import {View, Button, Text, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './bottomBox.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import 'taro-ui/dist/style/components/icon.scss';
import {IPLAND_OSS_HOST} from '../../constant';
import userImg from '@/assets/image/my/uesr_pic.png';

const moreData = [
  {
    title: '我的背包',
    img: `${IPLAND_OSS_HOST}home/bag.png`,
    type: 'ipland',
    url: '/pages/package-I/backpack/index',
  },
  {
    title: '月度排行',
    img: `${IPLAND_OSS_HOST}home/rank.png`,
    type: 'rank',
    url: '/pages/package-I/rankingList/index',
  },
  {
    title: '任务中心',
    img: `${IPLAND_OSS_HOST}home/task1.png`,
    type: 'task',
    url: '/pages/package-A/question-survery/index',
  },
  {
    title: '乐园导航',
    img: `${IPLAND_OSS_HOST}home/navigation.png`,
    type: 'navigation',
  },
];

//@ts-ignore
@connect<Partial<IToolsBoxProps>, T.IToolsBoxState>(store2Props, actions)
export default class Info extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      // pictureUrl: '',
    };
  }

  getToolsBox(listData) {
    let {
      main: {isAquamarineMember, isCrystalMember},
    } = this.props;
    let toolsView = [];
    listData.map((item, index) => {
      toolsView.push(
        <View
          className="item"
          onClick={() => {
            if (item.type == 'task') {
              // 判断是否是会员，只有会员才能打开任务
              if (isAquamarineMember || isCrystalMember) {
                this.props.actions.action.commonChange('main.showTaskModal', true);
              } else {
                this.props.actions.action.commonChange('main.showOpenMemberModal', true);
              }
            } else if (item.type == 'rank') {
              this.props.actions.action.getRankList();
              this.props.actions.action.getLeaderboardRewards();
            } else if (item.type == 'navigation') {
              this.gotoNavi();
            } else {
              this.itemClick(item);
            }
          }}
        >
          <Image className="img" src={item.img} mode="heightFix" />
          <Text className="title">{item.title}</Text>
        </View>,
      );
    });
    return toolsView;
  }

  async itemClick(item) {
    Taro.navigateTo({
      url: item.url,
    });
  }

  async gotoNavi() {
    let {
      main: {isAquamarineMember, isCrystalMember, customer},
      actions: {action},
    } = this.props;
    let onlyShowCoinRain = true;
    // if (isAquamarineMember || isCrystalMember) onlyShowCoinRain = false;
    action.commonChange('main.bottomClickNavigation', true);
    action.commonChange('main.showNaviModal', true);
    // action.commonChange('main.onlyShowCoinRain', onlyShowCoinRain);
  }

  render() {
    let {
      main: {isAquamarineMember, isCrystalMember, customer},
      actions: {action},
    } = this.props;
    let itemStr = Taro.getStorageSync('b2b-wechat@login');
    // let {pictureUrl} = this.state;
    // if (!pictureUrl) pictureUrl = itemStr?.user?.pictureUrl;

    return (
      <View className="LangHomeBottomBox">
        <View className="left">
          <Button
            className="avatar"
            onClick={() => {
              Taro.navigateTo({url: '/pages/package-I/personalCenter/index'});
            }}
          >
            {/* `${IPLAND_OSS_HOST}home/headPic.png` */}
            <Image className="uesrImg" src={customer.pictureUrl || userImg} mode="aspectFill" />
          </Button>
          <View className="vip">
            <Text className="vipName">
              {isAquamarineMember && isCrystalMember
                ? '双会员'
                : isAquamarineMember && !isCrystalMember
                ? '蓝晶会员'
                : !isAquamarineMember && isCrystalMember
                ? '赤晶会员'
                : '普通用户'}
            </Text>
          </View>
          <Text className="username">{customer.name || '微信用户'}</Text>
        </View>
        <View className="toolsBox">{this.getToolsBox(moreData)}</View>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
